<!-- 执行器管理 -->
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { IDbAction, IDbSearchConfig, IDbTable, ITagData } from '@/types/global'
import * as taskApi from '@/api/task'
import useNotic from '@/hooks/useNotic'
import { ENUM_BTN_AUTH_TASK } from '@/config/btn'
import ExecuteInfo from './comps/ExecuteInfo.vue'
import { TASK_EXECUTOR_RIGISTER_TYPES } from './config/config'

const exeInfoRef = ref<InstanceType<typeof ExecuteInfo>>()
// 弹窗数据
const dialogData = reactive({
  title: '', // 详情-弹窗标题
  disabled: false // 详情-是否禁用
})
// 搜索栏配置
const searchConfig = reactive<IDbSearchConfig[]>([
  { label: 'appName', prop: 'appname', type: 'input' },
  { label: '名称', prop: 'title', type: 'input' }
])

// 表格数据
const tableData = reactive<IDbTable>({
  columns: [
    { label: 'appName', prop: 'appname', minWidth: '100px' },
    { label: '名称', prop: 'title', minWidth: '100px' },
    {
      label: '注册方式',
      prop: 'addressType',
      width: '150px',
      type: 'tag',
      tagFunc: (scoped) => {
        const curType = TASK_EXECUTOR_RIGISTER_TYPES.find((item) => item.value == scoped.row.addressType)
        const params: ITagData = { label: curType?.label || '', type: curType?.tagType || '' }
        return params
      }
    },
    {
      label: '机器地址',
      prop: 'registryList',
      minWidth: '100px',
      showOverflowTooltip: false,
      type: 'text',
      textFunc: (scoped) => {
        if (scoped.row.registryList && scoped.row.registryList.length) {
          const textStr = scoped.row.registryList.join('<br />')
          return textStr
        } else {
          return '-'
        }
      }
    },
    { label: '操作', prop: 'handle', fixed: 'right', type: 'slot', width: '200px' }
  ],
  data: [],
  total: 0,
  search: {
    pageNum: 1,
    pageSize: 20,
    appname: '',
    title: ''
  }
})

getDataList()

/**
 * 获取表格数据
 */
function getDataList() {
  taskApi.getTaskExecutorkByPage(tableData.search).then((res) => {
    if (res.success) {
      tableData.total = res.data?.total || 0
      tableData.data = res.data?.rows || []
    }
  })
}
/**
 * 点击添加
 */
function addClick() {
  dialogData.title = '添加执行器'
  dialogData.disabled = false
  exeInfoRef.value?.init()
}
/**
 * 点击详情/编辑
 */
function infoClick(row: any, disabled: boolean) {
  dialogData.title = disabled ? '执行器详情' : '编辑执行器'
  dialogData.disabled = disabled
  exeInfoRef.value?.init(row)
}
/**
 * 点击删除
 */
function delClick(scoped: any) {
  useNotic().confirm(`您确定要删除第${scoped.$index + 1}个执行器吗？`, (flag) => {
    if (flag) {
      taskApi.delTaskExecutor(scoped.row.id).then((res) => {
        if (res.success) {
          useNotic().success('删除成功')
          getDataList()
        }
      })
    }
  })
}
/**
 * 设置表格按钮
 */
function setBtnList(scoped: any) {
  const list: IDbAction[] = [
    { label: '详情', type: 'primary', auth: ENUM_BTN_AUTH_TASK['执行器管理:查'], onClick: () => infoClick(scoped.row, true) },
    { label: '编辑', type: 'primary', auth: ENUM_BTN_AUTH_TASK['执行器管理:改'], onClick: () => infoClick(scoped.row, false) },
    { label: '删除', type: 'danger', auth: ENUM_BTN_AUTH_TASK['执行器管理:删'], onClick: () => delClick(scoped) }
  ]
  return list
}
</script>

<template>
  <dui-page :search-config="searchConfig" :search-data="tableData.search" @search="getDataList">
    <template #btn>
      <db-auth-btn :auth="ENUM_BTN_AUTH_TASK['执行器管理:增']" type="primary" iconType="add" @click="addClick">
        添加执行器
      </db-auth-btn>
    </template>
    <template #default>
      <dui-table
        :data="tableData.data"
        :columns="tableData.columns"
        :total="tableData.total"
        :search="tableData.search"
        @search="getDataList"
      >
        <template #handleSlot="scoped">
          <dui-action :list="setBtnList(scoped)" />
        </template>
      </dui-table>
      <!-- 详情弹窗 -->
      <ExecuteInfo ref="exeInfoRef" v-bind="dialogData" @refresh="getDataList" />
    </template>
  </dui-page>
</template>
